<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>天气源更新量记录</title>
<script type="text/javascript" src="scripts/jquery.min.js"></script>
<script src="scripts/highstock/highstock.js"></script>
<script src="scripts/highstock/modules/exporting.js"></script>
<script src="scripts/highstock/themes/grid.js"></script>
<script type="text/javascript">
$(function() {
	var seriesOptions = [],
		yAxisOptions = [],
		seriesCounter = 0,
		names = ['wcc', 'ics', 'spb','gics'],
		colors = Highcharts.getOptions().colors;

	$.each(names, function(i, name) {

		$.getJSON('http://w.mdeve.com/s.php?t='+ name.toLowerCase() +'&callback=?',	function(data) {
			seriesOptions[i] = {
				name: create_title(name),
				data: data,
				marker : {
					enabled : true,
					radius : 3
				},
				shadow : true,
			};

			// As we're loading the data asynchronously, we don't know what order it will arrive. So
			// we keep a counter and create the chart when all the data is loaded.
			seriesCounter++;

			if (seriesCounter == names.length) {
				createChart();
			}
		});
	});



	// create the chart when all data is loaded
	function createChart() {
		$('#container').highcharts('StockChart', {
		    rangeSelector: {
		        selected: 0
		    },     
		    series: seriesOptions
		});
	}
	
	function create_title(t){
		if(t=="wcc") return "WM6.5 Manila";
		else if(t=="ics") return "iCalendar";
		else if(t=="spb") return "Spb Weather";
		else if(t=="gics") return "Google Calendar";
	}

});
</script>
</head>
<body>
<div id="container" style="height: 500px; min-width: 600px"></div>
</body>
</html>